@use '../variables';
@use '../../../styles/mixins';

$block: '.#{variables.$ns}radio';
$discMarginMSize: 5px;
$discMarginLSize: 6px;
$discMarginXLSize: 8px;

#{$block} {
    &__indicator {
        display: inline-block;
        position: relative;
        cursor: inherit;

        &::before {
            content: '';
            position: absolute;
            inset: 0;

            background-color: transparent;
            border: 1px solid var(--g-color-line-generic-accent);
            border-radius: 50%;
            transition: background 0.1s linear;
        }

        &::after {
            content: '\00a0';
            visibility: hidden;
        }
    }

    &__disc::before {
        content: '';
        position: absolute;

        border: none;
        background-color: var(--g-color-text-brand-contrast);
        border-radius: 50%;
        opacity: 0;
        transform: scale(0.1);
        transition:
            opacity 0.1s,
            transform 0.2s;
    }

    &__control {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        opacity: 0;
        background: none;
        border: none;
        outline: none;
        cursor: inherit;
    }

    &__outline {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        background: none;
        pointer-events: none;
        border-radius: 50%;
    }

    &__control:focus-visible + &__outline {
        @include mixins.focus-outline();
    }

    &_size {
        &_m {
            #{$block}__indicator {
                width: 14px;
                height: 14px;
            }

            #{$block}__disc::before {
                inset: $discMarginMSize;
            }
        }

        &_l {
            #{$block}__indicator {
                width: 17px;
                height: 17px;
            }

            #{$block}__disc::before {
                inset: $discMarginLSize;
            }
        }

        &_xl {
            #{$block}__indicator {
                width: 24px;
                height: 24px;
            }

            #{$block}__disc::before {
                inset: $discMarginXLSize;
            }
        }
    }

    &:hover {
        #{$block}__indicator {
            &::before {
                border-color: var(--g-color-line-generic-accent-hover);
            }
        }
    }

    &_checked {
        #{$block}__indicator {
            &::before {
                background-color: var(--g-color-base-brand);
                border: transparent;
            }

            #{$block}__disc::before {
                opacity: 1;
                transform: scale(1);
            }
        }
    }

    &_disabled {
        #{$block}__indicator {
            &::before {
                background-color: var(--g-color-base-generic-accent-disabled);
                border: transparent;
            }
        }

        &#{$block}_checked {
            #{$block}__disc::before {
                background-color: var(--g-color-text-hint);
            }
        }
    }
}
